<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
		<style type="text/css">
			body{
				margin: 0px;
			}
			header{
				height: 3.75rem;
				background-color: #f8f8f8;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #404040;
				font-size: 1.25rem;
				padding: 0px 0.625rem;
			}
			
			header>.pre,header>.close{
				color: burlywood;
			}
			
			nav{
				display: flex;
				height: 40px;
				/* align-items: center; */
				border-bottom: 1px #DEB887 solid;
			}
			
			nav>a{
				flex-grow: 1;
				/* text-align: center; */
				background-color: antiquewhite;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				text-decoration: none;
				color: brown;
			}
			
			nav>a:hover{
				background-color:  #A52A2A;
				color: white;
			}
			
			.news-item{
				display: flex;
				padding: 10px;
				align-items: center;
			}
			
			.news-item>img{
				width: 30%;
			}
			
			.news-item>div{
				display: flex;
				flex-direction: column;

			}

			
			.news-item>div>p{
				flex-grow: 1;
				/* font-weight: bold; */
				font-size: 18px;
				margin: 0px;
				padding: 10px;
				
			}
			
			.news-item>div>span{
				text-align: right;
			}
		</style>
	</head>
	<body>
		<header>
			<span class="pre"><i class="fa fa-chevron-left"></i>上一页</span>
			<span>校内新闻</span>
			<span class="close">关闭</span>
		</header>
		<nav>
			<a href="#">教务处</a>
			<a href="#">教务处</a>
			<a href="#">教务处</a>
			<a href="#">教务处</a>
			<a href="#">教务处</a>
			<a href="#">教务处</a>
		</nav>
		<div class="all-news">
			<div class="news-item">
				<img src="img/14.jpg" />
				<div>
					<p>玩笑升级完美校园，新开普新开普新开普新开普新开普.</p>
					<span>2022-12-22</span>
				</div>
			</div>
			<div class="news-item">
				<img src="img/14.jpg" />
				<div>
					<p>玩笑升级完美校园，新开普新开普新开普新开普新开普.</p>
					<span>2022-12-22</span>
				</div>
			</div>
			<div class="news-item">
				<img src="img/14.jpg" />
				<div>
					<p>玩笑升级完美校园，新开普新开普新开普新开普新开普.</p>
					<span>2022-12-22</span>
				</div>
			</div>
			<div class="news-item">
				<img src="img/14.jpg" />
				<div>
					<p>玩笑升级完美校园，新开普新开普新开普新开普新开普.</p>
					<span>2022-12-22</span>
				</div>
			</div>
			<div class="news-item">
				<img src="img/14.jpg" />
				<div>
					<p>玩笑升级完美校园，新开普新开普新开普新开普新开普.</p>
					<span>2022-12-22</span>
				</div>
			</div>
			<div class="news-item">
				<img src="img/14.jpg" />
				<div>
					<p>玩笑升级完美校园，新开普新开普新开普新开普新开普.</p>
					<span>2022-12-22</span>
				</div>
			</div>
			<div class="news-item">
				<img src="img/14.jpg" />
				<div>
					<p>玩笑升级完美校园，新开普新开普新开普新开普新开普.</p>
					<span>2022-12-22</span>
				</div>
			</div>
		</div>
	</body>
</html>
